<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/react.development.js"></script>
    <script src="lib/react-dom.development.js"></script>
    <script src="lib/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>
</body>
<script type="text/babel">
    // 注意：挂载阶段的钩子函数除render以外在整个生命周期过程中只会执行一次
    const root = ReactDOM.createRoot(document.querySelector("#root"));
    class App extends React.Component {
        constructor() {
            // 定义状态，定义实例属性
            super()
            this.Ref = React.createRef()
            this.state = {
                a:1
            }
            console.log('1-constructor')
        }
        UNSAFE_componentWillMount() {
            // 组件即将挂载
            console.log('2-UNSAFE_componentWillMount')
        }
        render() {
            // 组成渲染React的元素
            console.log('3-render')
            return (
                <div>
                    <h3 ref={this.Ref}>App:{this.state.a}</h3>
                </div>
            )
        }
        componentDidMount() {
            // 当组件挂载完毕后执行
            console.log('4-componentDidMount')
        }
    }

    // 渲染页面
    root.render((
        <App />
    ))
</script>
</html>